import React, {Component} from 'react';
import  Header from '../../component/Header'
import './style.scss';
import axios from '../../util/axios'
import {api}  from '../../api'
import {fmtDate}  from '../../util/dateUtil'
import { ActivityIndicator } from 'antd-mobile';

class CommonDetails extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			data:{},
			timeCost:[],
			isLoading:true
		}

    }
    componentDidMount(){
		let id=this.props.match.params.id
		axios.get(api.handleDetails+'&applyId='+id)
		.then(respone=>{
		   console.log(respone);
		   this.setState({
			  isLoading:false
		   })
		  if(respone.result&&respone.result=="ok"){
			   
			   this.setState({
                   data:respone.data[0]
			   })
		  }
		}).catch(err=>{
			console.log(err);
		})


		axios.get(api.addDriverJieSuanD+'&applyId='+id)
        .then(respone=>{
        
          if(respone.result&&respone.result=="ok"){
			  let data=respone.data;
			let timeCost=[];
				data.map((item,index)=>{
					let arr=[];
					arr.push({id:index+1,textColor:'#1a8afa',
						title:'起止地址',text:item.jsAddress
					});
					arr.push({id:index+2,textColor:'#1a8afa',
					title:'长途公里',text:item.jsKm})
					arr.push({id:index+3,textColor:'#1a8afa',
					title:'市内用车',text:item.jsDays
					})
					timeCost.push({
						title:fmtDate(item.jsTime),
						data:arr
					});
				}) 
				console.log("timeCost",timeCost);
				this.setState({
					timeCost
				})
		  }
		}).catch(err=>{
			console.log(err);
		})
	}
	
	getStr(str){
		if(str&&str!=''){
			return str
		}
		return ''
	}
	render() {
		let data=this.state.data;
		return(
		<div className="common-details">		
			 <Header title="详情" 
				isBack={true} 
				history={this.props.history}/>
				{this.state.isLoading?<ActivityIndicator toast text="正在加载" />:
				<div className="body">
				     <div className="details-banner">
					      <img className="details-banner-img" src={require('./icon_chexing@3x.png')}/>
						  <p className="car-num">{data.applySxPople}</p>
						  <p className="driver-info">
						        <span>{data.driverName}</span>
								<span>{data.driverPhone}</span>
								<span>{data.carNum}</span>
						 </p>
					 </div>
				      <ul className="info-item addree-info">
								<li className="over-addree">
									<span className="icon">出发</span>
									<p>{data.applyUseAddress}</p>
								</li>
								<li className="start-addree">
									<span className="icon">目的地</span>
									<p>{data.applyDestination}</p>
								</li>
							</ul>
					
							<div className="title-info-item order-info-item">
								<div className="info-item-title order-info-item-title ">
									<span className="icon"></span>
									<p>订单号：{data.yongCheNo}</p>
								</div>
								<ul className="info-item">
										<li >
											<span>出车时间</span>
											<p>{fmtDate(data.applyUseTime)}</p>
										</li>
										<li >
											<span>归队时间</span>
											<p>{fmtDate(data.applyBackTime)}</p>
										</li>
										<li className="info-item-three">
											<p>{data.yongCheRen}</p>
											<p>{data.applyUsePhone}</p>
											<p>{data.applyManNum}人</p>
										</li>
									</ul>
							</div>
							<div className="title-info-item remarks-info-item">
								<div className="info-item-title remarks-info-item-title">
									<p>备注信息</p>
								</div>
								<ul className="info-item">
										<li >
											<span>用车性质</span>
											<p>{data.yongCheXz}</p>
										</li>
										<li >
											<span>用车区域</span>
											<p>{data.itemName}</p>
										</li>
										<li >
											<span>用车部门</span>
											<p>{data.deptName}</p>
										</li>
										<li >
											<span>用车事由</span>
											<p>{data.applyRemark}</p>
										</li>
										<li >
											<span>备注信息</span>
											<p>{data.applyBz}</p>
										</li>
									</ul>
							</div>
							<div className="title-info-item cost-info-item">
								<div className="info-item-title cost-info-item-title">
									<p>费用相关</p>
								</div>
								<ul className="info-item">
										<li>
											<span>住宿费</span>
											<p>{data.applyStay}¥</p>
										</li>
										<li >
											<span>停车费</span>
											<p>{data.applyCarPark}¥</p>
										</li>
										<li >
											<span>过境费</span>
											<p>{data.applyToll}¥</p>
										</li>
										<li>
											<span>其他费</span>
											<p>{data.applyOtherMoney}¥</p>
										</li>
									</ul>
							</div>
							{this.state.timeCost.map((item,index)=>{
                                return(<div className="title-info-item remarks-info-item">
									<div className="info-item-title remarks-info-item-title">
										<p>{item.title}</p>
									</div>
								    <ul className="info-item">
										{item.data.map((sitem,sindex)=>{
											return <li>
												<span>{sitem.title}</span>
												<p>{sitem.text}</p>
											</li>
										})}
										
									</ul>
							    </div>)
							})}
				</div>}
       </div>    


		);
	}
}



{/* <div className="details">
	<Header title="详情" 
	isBack={true} 
	history={this.props.history} />
<div className="body">
        <div className="details-bg">
            <div className="details-img">
                <a href=""></a>

            </div>
            <div className="details-font">小汽车:</div>
        </div>
        <div className="details-adress">
            <div className="adress adress-top">
                <a href=""></a>
                <i>出发</i>
                <span>省政务厅</span>
            </div>
            <div className="solid"></div>
            <div className="adress adress-bottom">
                <a href=""></a>
                <i>出发</i>
                <span>省政务厅</span>
            </div>
        </div>
        <div className="order-bg">
            <div className="order">
                <div className="order-number order-height">
                    <a href="javascript:;"></a>
                    <i>订单号:</i>
                    <span>201808240770138008</span>
                </div>
                <div className="order-start order-height">
                    <i>出车时间:</i>
                    <span>2018-08-28 09:00:00</span>
                </div>
                <div className="order-end order-height">
                    <i>归队时间:</i>
                    <span>2018-08-28 09:00:00</span>
                </div>
                <div className="order-user ">
                    <div className="user-name">王小明</div>
                    <div className="user-phone">13456789043</div>
                    <div className="user-person">
                        <span>10</span>
                        <i>人</i>
                    </div>
                </div>
            </div>
        </div>
        <div className="message-bg">
            <div className="message">
                <div className="message-title">
                    备注信息
                </div>
                <div className="message-height">
                    <i>用车性质</i>
                    <span>厅省级带队调研</span>
                </div>
                <div className="message-height">
                    <i>用车区域</i>
                    <span>厅省级带队调研</span>
                </div>
                <div className="message-height">
                    <i>用车部门</i>
                    <span>厅省级带队调研</span>
                </div>
                <div className="message-height">
                    <i>用车是由</i>
                    <span>厅省级带队调研</span>
                </div>
                <div className="message-remark">
                    <i>备注信息</i>
                    <div className="message-remarks">厅省级带颠三倒四多</div>
                </div>
            </div>
        </div>
	</div>
</div> */}
export default CommonDetails;